<template>
  <div style="margin-left: 15px">
    <p class="shenqing">详细信息
      <el-button size="mini" type="warning" icon="el-icon-download" @click='exportList'>导出</el-button>
      <el-button type="primary" icon="el-icon-back" size="mini" @click="goback">返回上一页</el-button>
    </p>
    <table border="1" rules="all" class="tablestyle">
      <tr>
        <td style="width: 164px;height: 34px;text-align: center;">申请名</td>
        <td style="width: 415px; padding-left: 10px;">{{applicationData.pickName}}</td>
        <td style="width: 164px;height: 34px;text-align: center;">用途</td>
        <td style="width: 415px; padding-left: 10px;">{{applicationData.useing}}</td>
      </tr>
      <tr>
        <td style="width: 164px;height: 34px;text-align: center;">计划月份</td>
        <td style="width: 415px; padding-left: 10px;">{{applicationData.planMonth}}</td>
        <td style="width: 164px;height: 34px;text-align: center;">计划类型</td>
        <td style="width: 415px; padding-left: 10px;">
          <span v-show="applicationData.planType=='1'">月度计划</span>
          <span v-show="applicationData.planType=='2'">临时计划</span>
        </td>
      </tr>
      <tr>
        <td style="width: 164px;height: 34px;text-align: center;">备注</td>
        <td  colspan="3" style="width: 1030px;padding-left: 10px">
          {{applicationData.note}}
        </td>
      </tr>
    </table>
    <el-table  :data="tableDatajihua" stripe style="margin-left: 15px;width: 95%;margin-top: 20px"
               border>
      <el-table-column align="center" type="index" label="序号"  width="55" prop="" />
      <el-table-column align="center" label="物料编码" property="mno" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="物料名称"  property="mname" ></el-table-column>
      <el-table-column align="center" label="物料规格"  property="mmodel"  ></el-table-column>
      <el-table-column align="center" label="单位"  property="unit"  ></el-table-column>
      <el-table-column align="center" label="计划价"  property="planPrice"  ></el-table-column>
      <el-table-column align="center" label="技术参数"  property="technicalParameters" :show-overflow-tooltip="true" v-if="false"></el-table-column>
      <el-table-column align="center" label="需求数"  property="demandNum" width="100" ></el-table-column>
      <el-table-column align="center" label="利库数"  property="loseNum" width="100" > </el-table-column>
      <el-table-column align="center" label="库存"  property="inventory"  ></el-table-column>
      <el-table-column align="center" label="备注"  property="note"  ></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { listRole, getRole, delRole, addRole, updateRole, exportRole, dataScope, changeRoleStatus } from "@/api/system/role";
  import request from '@/utils/request'

  export default {
    name: "Role",
    data() {
      return {
        //页码信息
        XQpage:undefined,
        XQsize:undefined,
        //申请信息
        applicationData:{
          pickName:'',
          useing:'',
          planMonth:'',
          planType:'',
          note:'',
        },
        //计划信息
        tableDatajihua:[],
        //详细id信息
        // wlMessage: [],
        //详情id
        id:'',
        //导出参数
        dcME:{
          wzId:'',
          auditSteps:''
        }
      };
    },
    created() {
      console.log('接收-采购申请详情',this.$route.query)
      this.applicationData.pickName = this.$route.query.data.pickName
      this.applicationData.useing = this.$route.query.data.useing
      this.applicationData.planMonth = this.$route.query.data.planMonth
      this.applicationData.planType = this.$route.query.data.planType
      this.applicationData.note = this.$route.query.data.note
      this.tableDatajihua =this.$route.query.data.wzDemandPlanInfos
      this.id = this.$route.query.data.id
      this.dcME.wzId = this.$route.query.data.id
      this.dcME.auditSteps = this.$route.query.data.auditSteps
      this.XQpage = this.$route.query.page
      this.XQsize = this.$route.query.size
      this.getWLmessage();
    },
    methods: {
       getWLmessage: function () {
         request({
           url:'/system/demandPlan/'+ this.id,
           method:'get',
          //  data:this.applicationData
         }).then(response =>{
           this.tableDatajihua = response.data.wzDemandPlanInfos
           console.log(response)
         })
       },
        //返回
      goback () {
         this.$router.push({path:'/material/mplan',query:{page:this.XQpage,size:this.XQsize}});
      },
        /** 导出按钮操作 */
      exportList() {
        this.$confirm('是否确认导出?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          this.derive()
          console.log(456)
          // return this.download(res.data)
        }).catch((e)=> {
        })
      },
      //导出
      derive() {
        console.log(this.dcME)
        request({
          url:'system/demandPlan/listByDepExport',
          method:'get',
          params:this.dcME
        }).then(response =>{
          console.log(response)
           return this.download(response.data)
        })
      },
    },
  };
</script>
<style>
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }
  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .fujian {

    color: #787be8;
    margin-top: 15px;
  }
  .fujian span{
    margin-left: 15px;
    cursor: pointer;
  }
</style>
